<script>
  import { onMount } from "svelte";
  import { fade } from "svelte/transition";
  import { getJssdkConfig, wxInit } from "./js/wx-config";
  import config from "./js/config";
  wxInit();
  // https://video.699pic.com/videos/66/99/35/b_PYbea15TsEBJ1654669935.mp4

  let videoEl, videoData, videoSrc, initHide;
  let visible = true,
    videoShow = true,
    videoVisible = false;

  let initVideoEl1, initVideoEl2, initVideoVisible1 = true, initVideoVisible2;
  let currentId = "";
  onMount(async () => {
    console.log(1112,initVideoEl1 )
    initVideoEl1.play();
  });
  const onInitPlayedFirst = () => {
    initVideoVisible1 = false;
    initVideoVisible2 = true;
  };
  const play = () => {
    videoEl.play();
  };
  let imgList = [];
  const onPlayed = () => {
    videoVisible = false;
    currentId = geNextId(currentId);
    imgList = getCurIdData(currentId).children;
    imgsBoxVisible = true;
    console.log("end");
  };
  const loadImg = () => {
    currentId = config[0].id;
    imgList = config[0].children;
  };
  // loadImg();

  const getParentId = (id) => {
    return id.slice(0, id.length - 2);
  };
  const geNextId = (id) => {
    return id + "-1";
  };
  const getCurIdData = (id) => {
    console.log("getdata", id, config);
    return config.find((item) => item.id == id);
  };
  let imgsBoxVisible = false;
  const linkTo = (data) => {
    console.log("imgData", data);
    imgsBoxVisible = false;
    let nextId = "";
    if (data.nextId == "back" || data.name == "返回上级") {
      nextId = getParentId(currentId);
    } else {
      nextId = data.nextId || geNextId(currentId);
    }
    console.log(1212, nextId);
    currentId = nextId;
    let nextData = getCurIdData(nextId);
    console.log(111, nextData);
    if (data.nextType == "btn") {
      imgList = nextData.children || [];
      imgsBoxVisible = true;
    } else {
      videoVisible = true;
      setTimeout(() => {
        videoEl.src = nextData.videoSrc;
        videoEl.play();
      }, 500);
    }
  };
</script>

<main>
  <!-- <button on:click={getJssdkConfig}>授权test</button> -->
  <div class="lj-app">
    <!-- {#if visible}
    <div class="lj-init-box" in:fade="{inFade}" out:fade="{outFade}">
      <video src="/src/assets/videos/init-video1.mp4"/>
      <img  class="init-top" src="src/assets/images/init-top.png" alt=""/>
      <img  class="init-logo" src="src/assets/images/init-logo.png" alt=""/>
    </div>
    {/if} -->
    <div class="lj-app-video-default">
        <video
          src="src/assets/videos/init-video1.mp4"
          bind:this={initVideoEl1}
          class="lj-video"
          on:ended={onInitPlayedFirst}
        />

    </div>
    <div>
      {#if videoVisible}
        <div>
          <video
            src={videoSrc}
            bind:this={videoEl}
            class="lj-video"
            on:ended={onPlayed}
          />
        </div>
      {/if}

      <!-- <div  on:click={play}>播放</div> -->
      {#if imgsBoxVisible}
        <div class="lj-img-btns">
          <img class="btns-bg-img" src="src/assets/images/1.jpg" alt="" />
          <!-- for 循环 -->
          <!-- svelte-ignore a11y-missing-attribute -->
          <div class="link-btn-box">
            {#each imgList as item, i}
              <!-- <img
                class="link-btn-item"
                on:click={() => linkTo(item)}
                src={item.src}
              /> -->
              <div on:click={() => linkTo(item)}>{item.name}</div>
            {/each}
          </div>
        </div>
      {/if}
    </div>
  </div>
</main>

<style>
  @import "./app.css";
</style>
